import React from 'react'
import './OldSongs.scss'
import startSong from '@/assets/fonts/music/startSong.svg'
import stopSong from '@/assets/fonts/music/stopSong.svg'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/modules/RootState'
import listsSong from '@/assets/fonts/music/listsSong.svg'
import { changeHiddenList } from '@/store/musicList'
import { getMusicUrl } from '@/utils/api'
import { useAudioContext } from '../Audio/Audio'
import { transTime } from '@/utils/time'

interface OlgSongsProps{
    className:string
}

function OlgSongs({className}:OlgSongsProps) {
    const dispatch = useDispatch()
    const audioDispatch = useAudioContext()
    const musicList = useSelector((state:RootState) => state.musicList);

    /* 获取音乐地址，并且进行播放音乐 */
    const postMusic = async (id:number,index:number) =>{
        if(id == audioDispatch.audioIndex){
            return audioDispatch.StartOrStop()
        }

        let data =await (dispatch as any)(getMusicUrl(id))

        const keys = {
        payload:data.payload,
        index:index
        }

        audioDispatch.playMusic(keys)
    }

  return (
    <div className={`${className} olgSongs-container`}>
            <div className='oldSongs-title'>
                当前播放
            </div>
            <div className='oldSongs-title2'>
                <div>
                    总{musicList.oldSongs.length}首
                </div>
                <div>
                    <span>收藏全部</span>
                    <span style={{marginLeft:'10px'}}>清空列表</span>
                </div>
            </div>
            <div className='oldSongs-title3'>
                {
                    musicList.oldSongs.map((item,index)=>{
                        return(
                            <ul key={index} style={{backgroundColor:item.id == audioDispatch.audioId ? 'rgb(196, 196, 196)' : ''}}>
                                {
                                    audioDispatch.audioPlay
                                    &&
                                    (audioDispatch.audioId == item.id)
                                    &&
                                    <li>
                                        <img src={startSong} alt="" onClick={()=>audioDispatch.StartOrStop()}/>
                                    </li>
                                }
                                {
                                    audioDispatch.audioPlay
                                    &&
                                    (audioDispatch.audioId == item.id)
                                    ||
                                    <li>
                                    <img src={stopSong} alt="" onClick={()=>postMusic(item.id,index)}/>
                                    </li>
                                }
                                <li>
                                    <span>
                                        {item.name}
                                    </span>
                                </li>
                                <li>
                                    <span>
                                        {item.ar[0].name}
                                    </span>
                                </li>
                                <li>
                                    <span>
                                        {
                                            transTime(item.dt)
                                        }
                                    </span>
                                </li>
                            </ul>
                        )
                    })
                }
            </div>
            <div className='oldSongs-title4'>
                <img src={listsSong} alt="" onClick={()=>dispatch(changeHiddenList(0))}/>
            </div>
    </div>
  )
}

export default React.memo(OlgSongs)